<template>
  <div class="monthStatementBox">
    <el-card class="box-card">
      <div>
        行业名称：<el-input
          v-model="GoodsQuery"
          placeholder="请输入名称"
        ></el-input>
      </div>
      <div>
        <el-button type="primary" size="small" @click="Query()">查询</el-button>
        <el-button type="danger" size="small" @click="reset()">重置</el-button>
      </div>
    </el-card>
    <div v-loading="loading" class="monthStatementTable">
      <div class="itemDropDown">
        <div class="topLab">
          行业数量：xxx
          <div />
          <div class="rightLabBox">
            <a
              class="el-button fr el-button--primary el-button--mini"
              title="导出"
              @click="handleExport()"
              >导出</a
            >
          </div>
        </div>
        <el-table
          id="item"
          :data="list"
          border=""
          style="width: 100%; text-align: center"
          align="center"
          row-key="id"
        >
          <el-table-column
            prop="firmName"
            label="行业名称"
            style="width: 34%"
            align="center"
          />
          <el-table-column
            prop="sort"
            label="排序"
            style="width: 33%"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            style="width: 33%"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="handleClick(scope.row)"
                type="primary"
                size="mini"
                >编辑</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click.native.prevent="deleteClick(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.page"
          :page-size="page.size"
          :page-sizes="[2, 3, 5, 10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
          @current-change="changePage"
          @size-change="changeSize"
        />
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div>
        行业名称：<el-input
          v-model="formData.firmName"
          placeholder="请输入名称"
        ></el-input>
      </div>
      <br />
      <div>
        行业排序：<el-input
          v-model="formData.sort"
          placeholder="请输入数字"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelClick()">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="GoodsQueryShow" width="30%">
      <span>请输入行业名称</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="GoodsQueryShow = false">取 消</el-button>
        <el-button type="primary" @click="BtnOK()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  searchProfession,
  deleteProfession,
  queryProfession,
  editProfession
} from '@/api/sharePBD'
export default {
  name: 'Management-industry',

  data () {
    return {
      list: [],
      GoodsQuery: '',
      GoodsQueryShow: false,
      dialogVisible: false,
      formData: {
        id: null,
        firmName: '',
        sort: ''
      },
      loading: false,
      // 分页
      page: {
        page: 1,
        size: 10,
        total: 0
      }
    }
  },
  created () {
    this.profession()
  },
  methods: {
    // 翻页
    async  changePage (newPage) {
      this.page.page = newPage
      const obj = {
        _page: this.page.page,
        _limit: this.page.size
      }
      const newlist = await searchProfession(obj)
      this.list = newlist.data
    },
    // 变换页面条数
    async changeSize (newSize) {
      this.page.size = newSize
      const obj = {
        _limit: this.page.size
      }
      const newlist = await searchProfession(obj)
      this.list = newlist.data
    },
    // 查询
    Query () {
      if (this.GoodsQuery === '') {
        this.GoodsQueryShow = true
      } else {
        const newlist = this.list.filter((item) => {
          if (this.GoodsQuery === item.firmName) {
            return item
          }
        })
        this.list = newlist
      }
    },
    async profession () {
      try {
        const obj = {
          _page: 1,
          _limit: 10
        }
        const newlist = await searchProfession(obj)
        this.list = newlist.data
        this.page.total = this.list.length
      } catch (error) {
        console.log(error)
      }
    },
    // 重置
    reset () {
      this.profession()
      this.GoodsQuery = ''
    },
    // 编辑行业信息
    async handleClick (row) {
      const newlist = await queryProfession(row.id)
      const data = newlist.data
      console.log(data)
      this.formData.id = data.id
      this.formData.firmName = data.firmName
      this.formData.sort = data.sort
      this.dialogVisible = true
    },
    // 修改行业信息
    async onSubmit () {
      console.log(this.formData)
      await editProfession(this.formData)
      this.dialogVisible = false
      this.profession()
    },
    cancelClick () {
      this.dialogVisible = false
    },
    deleteClick (row) {
      try {
        this.$confirm('您确定删除该行业吗')
          .then(async () => {
            await deleteProfession(row.id)
            this.profession()
            this.$message.success('删除成功')
          })
          .catch()
      } catch (error) {
        console.log(error)
      }
    }
  },
  handleExport () {}
}
</script>

<style lang="less" scoped>
.monthStatementBox {
  padding: 20px;
  /deep/ .el-card__body {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .el-input {
    width: 200px;
  }

  .monthStatementTop {
    position: relative;
    background: #fff;
    padding: 10px 15px 0 15px;
    border-bottom: solid 1px #f4f4f4;
    .title {
      color: #409eff;
      line-height: 40px;
      border-bottom: solid 2px #409eff;
      font-size: 18px;
      font-weight: bold;
      display: inline-block;
      padding: 0 25px;
      .yearChange {
        position: absolute;
        top: 5px;
        right: 10px;
      }
    }
  }
  .monthStatementTable {
    background: #fff;

    .itemTopLab {
      border-top: solid 1px #f0f0f0;
      border-bottom: solid 3px #ccc;
      padding: 15px;
      div {
        display: inline-block;
        padding: 0 58px;
        border-right: solid 1px #ccc;
      }
      div:last-child,
      div:first-child {
        border: none;
      }
      .lab {
        position: relative;
        top: -15px;
        padding-right: 0;
        padding-left: 15px;
      }
      .labTit {
        cursor: pointer;
      }
      .title {
        font-size: 16px;
        margin: 10px 0;
        span {
          position: relative;
          bottom: -2px;
          font-size: 13px;
          color: #999;
          margin-left: 5px;
        }
      }
      .itemTit {
        color: #999;
        margin: 8px 0;
        font-size: 13px;
      }
      .itemNum {
        font-size: 20px;
        margin: 0;
      }
    }
    .itemDropDown {
      background: #fff;
      .topLab {
        position: relative;
        padding: 15px;
        div {
          display: inline-block;
          margin: 0 10px;
          span {
            display: inline-block;
            position: relative;
            top: 2px;
            margin-right: 5px;
            width: 15px;
            height: 15px;
            background: #a8f8bb;
          }
        }
        .rightLabBox {
          position: absolute;
          right: 10px;
          top: 10px;
          div {
            border: solid 1px #30b08f;
            color: #30b08f;
            border-radius: 3px;
            padding: 4px 10px;
            font-size: 14px;
          }
        }
      }
      .act {
        border-bottom: solid 3px #30b08f;
        .lab {
          color: #30b08f;
        }
        .labTit {
          color: #30b08f;
        }
      }
    }
    .itemes:hover {
      background: #fafbff;
    }
    .itemes .lab:hover {
      cursor: pointer;
    }
  }
  .butList {
    border-top: solid 1px #f4f4f4;
    text-align: center;
    background: #fff;
    span {
      display: inline-block;
      background: #a8f8bb;
      color: #fff;
      padding: 8px 20px;
      border-radius: 3px;
      margin: 10px;
      cursor: pointer;
    }
    .cancel {
      background: #ccc;
      color: #666;
    }
  }
  .block {
    display: flex;
    justify-content: center;
    /deep/.el-input__inner {
      width: 100px;
    }
  }
}
</style>
